<demo>
基本用例
</demo>
<template>
  <div>
    <p>
      Toast组件默认出现的位置是在屏幕中间，开发者可以通过position属性传入 'top'
      'middle' 'bottom' 来控制组件出现的位置。
    </p>
    <div class="toast-button">
      <Button @click="toggleTop">top</Button>
      <Button @click="toggleMiddle">middle</Button>
      <Button @click="toggleBottom">bottom</Button>
    </div>

    <Toast :visible="x" :position="position">
      <template v-slot:content>
        <strong>Hellow Word!!</strong>
      </template>
    </Toast>
  </div>
</template>

<script lang="ts">
import Toast from "../lib/Toast.vue";
import Button from "../lib/Button.vue";
import { ref } from "vue";
export default {
  components: {
    Toast,
    Button,
  },
  setup() {
    const x = ref(false);
    const position = ref("middle");
    let timeid = null;
    const setTime = () => {
      x.value = !x.value;
      const id = setTimeout(() => {
        if (x.value === false) {
          x.value = true;
        }
        if (timeid) {
          window.clearTimeout(timeid);
        }
        timeid = setTimeout(() => {
          x.value = false;
        }, 4000);
        window.clearTimeout(id);
      });
    };
    const toggleTop = () => {
      setTime();
      position.value = "top";
    };
    const toggleMiddle = () => {
      setTime();
      position.value = "middle";
    };
    const toggleBottom = () => {
      setTime();
      position.value = "bottom";
    };
    return {
      x,
      toggleTop,
      toggleMiddle,
      toggleBottom,
      position,
    };
  },
};
</script>

<style lang='scss'>
.toast-button {
  display: flex;
  margin-top: 16px;
}
</style>